import 'dart:ui';

import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:flutter_swiper/flutter_swiper.dart';
import 'package:stage_app/constants/color_constant.dart';
import 'package:stage_app/constants/constant.dart';
import 'package:stage_app/model/function_item.dart';
import 'package:stage_app/wigets/button/round_button.dart';

const MIN_OFFSET = 150;

class HomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  double appBarAlpha = 0;

//  double _topPadding = MediaQueryData.fromWindow(window).padding.top;
  List _imageUrls = [
    'https://img30.360buyimg.com/pop/s590x470_jfs/t1/98710/16/12197/69497/5e42664bE60aa4759/a87f22ead3994b22.jpg.webp',
    'https://img13.360buyimg.com/pop/s590x470_jfs/t1/105525/14/12261/65525/5e46194eE778e09f6/55c95c9f84fd500a.jpg.webp',
    'https://img14.360buyimg.com/pop/s590x470_jfs/t1/98327/37/12149/83277/5e44d8afE0e11d3fe/64d5dd90535ad81a.jpg.webp',
  ];

  List<FunctionItem> _fuctionItems = [
    new FunctionItem(
        icon: 'come_storeroom.png',
        title: '入库扫描',
        subTitle: '您所派的物品进行扫描通过',
        rightIcon: 'come_storeroom_circle.png'),
    new FunctionItem(
        icon: 'get_storeroom.png',
        title: '出库扫描',
        subTitle: '您所派的物品进行扫描通过',
        rightIcon: 'get_storeroom_circle.png'),
    new FunctionItem(
        icon: 'record.png',
        title: '仓库记录',
        subTitle: '您所派的物品进行扫描通过',
        rightIcon: 'record_circle.png'),
  ];

  @override
  Widget build(BuildContext context) {
    print('build');
    return Scaffold(
      backgroundColor: ColorConstant.white_fc,
      body: SafeArea(
        child: new Padding(
          padding: EdgeInsets.fromLTRB(SizeConstants.marginSize, 0, SizeConstants.marginSize, 0),
          child: CustomScrollView(
            physics: const BouncingScrollPhysics(),
            shrinkWrap: false,
            slivers: <Widget>[
              SliverToBoxAdapter(
                child: userInfo(),
              ),
              SliverToBoxAdapter(
                child: searchBar(),
              ),
              SliverToBoxAdapter(
                child: banner(),
              ),
              SliverToBoxAdapter(
                child: new Container(
                  height: 185.5,
                  child: statistics(),
                ),
              ),
              SliverToBoxAdapter(
                child: new Container(
                  margin: EdgeInsets.only(top: 29),
                  child: functionList(),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  Container userInfo() {
    return Container(
      padding: EdgeInsets.fromLTRB(0, 8.5.w, 0, 16.5.w),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        children: <Widget>[
          new Text('无人之岛'),
          new Padding(
            padding: EdgeInsets.only(left: 9.w),
            child: CircleAvatar(
              radius: 10.5.w,
              backgroundImage: AssetImage("assets/images/user.jpg"),
            ),
          )
        ],
      ),
    );
  }

  searchBar() {
    return Container(
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          new Row(
            children: <Widget>[
              new Column(
                children: <Widget>[
                  new Text('今日派件'),
                  new Text(
                    '36',
                    style: new TextStyle(fontSize: 36.sp),
                  ),
                ],
              )
            ],
          ),
          new RoundButton(
            height: 21.h,
            width: 60.w,
            child: new Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                new Icon(
                  Icons.search,
                  size: 11.w,
                  color: Colors.white,
                ),
                new Text(
                  '搜索',
                  style: new TextStyle(fontSize: 12.sp, color: Colors.white),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  banner() {
    return Container(
      margin: EdgeInsets.fromLTRB(0, 18.w, 0, 18.w),
      height: 174.5.h,
      child: Swiper(
        itemCount: _imageUrls.length,
        autoplay: true,
        viewportFraction: 0.8,
        scale: 0.9,
        itemBuilder: (BuildContext context, int index) {
          return Image.network(
            _imageUrls[index],
            fit: BoxFit.fill,
          );
        },
        pagination: SwiperPagination(),
      ),
    );
  }

  statistics() {
    return new ListView(
      //设置水平方向排列
      scrollDirection: Axis.horizontal,
      children: <Widget>[
        Container(
          width: 150.0.w,
          margin: EdgeInsets.only(top: 16.5.w, right: 17.w),
          color: ColorConstant.yellow,
          child: new Stack(
            children: <Widget>[
              new Padding(
                padding: EdgeInsets.only(left: 17.w),
                child: Transform.translate(
                  offset: Offset(0, -16.5.w),
                  child: Container(
                    decoration: BoxDecoration(
                      color: Colors.white
                    ),
                    child: new Padding(
                        padding: EdgeInsets.all(10.w),
                        child: Image.asset(
                          Constant.ASSETS_IMG + 'addressee.png',
                          width: 37.5.w,
                          height: 37.5.h,
                        )
                    ),
                  ),
                ),
              ),
              Positioned(
                right: 16,
                top: 13.0,
                child: Text(
                  '今日收件',
                  style: new TextStyle(fontSize: 12.sp, color: Colors.white),
                ),
              ),
              new Center(
                child: Text('666',style: new TextStyle(fontSize: 29.sp, color: Colors.white)),
              ),
              new Align(
                alignment: FractionalOffset.bottomLeft,
                child: new Padding(
                  padding: EdgeInsets.only(left: 7.w, bottom: 10.w),
                  child: new Text(
                    '456',
                    style: new TextStyle(fontSize: 18.sp),
                  ),
                ),
              ),
              new Align(
                alignment: FractionalOffset.bottomLeft,
                child: new Padding(
                  padding: EdgeInsets.only(left: 7.w, bottom: 10.w),
                  child: new Text(
                    '456',
                    style: new TextStyle(fontSize: 18.sp, color: Colors.white),
                  ),
                ),
              ),
            ],
          ),
        ),
        Container(
          width: 150.0.w,
          margin: EdgeInsets.only(top: 16.5.w),
          decoration: BoxDecoration(
            color: Colors.white,
          ),
          child: new Stack(
            children: <Widget>[
              new Padding(
                padding: EdgeInsets.only(left: 17.w),
                child: Transform.translate(
                  offset: Offset(0, -16.5.w),
                  child: Container(
                    decoration: BoxDecoration(
                      color: Colors.white
                    ),
                    child: new Padding(
                        padding: EdgeInsets.all(10.w),
                        child: Image.asset(
                          Constant.ASSETS_IMG + 'come.png',
                          width: 37.5.w,
                          height: 37.5.h,
                        )
                    ),
                  ),
                ),
              ),
              Positioned(
                right: 16,
                top: 13.0,
                child: Text(
                  '今日出库',
                  style: new TextStyle(fontSize: 12.sp),
                ),
              ),
              new Center(
                child: Image.asset(
                  Constant.ASSETS_IMG + 'line_red.png',
                  width: 126.5.w,
                  height: 52.h,
                ),
              ),
              new Align(
                alignment: FractionalOffset.bottomLeft,
                child: new Padding(
                  padding: EdgeInsets.only(left: 7.w, bottom: 10.w),
                  child: new Text(
                    '456',
                    style: new TextStyle(fontSize: 18.sp),
                  ),
                ),
              ),
              new Align(
                alignment: FractionalOffset.bottomLeft,
                child: new Padding(
                  padding: EdgeInsets.only(left: 7.w, bottom: 10.w),
                  child: new Text(
                    '456',
                    style: new TextStyle(fontSize: 18.sp, color: ColorConstant.red),
                  ),
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }

  functionList() {
    return new Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: getFunctionItem(),
    );
  }

  List<Widget> getFunctionItem() {
    List<Widget> children = new List();
    children.add(new Padding(
      padding: EdgeInsets.only(bottom: 9.5.w),
      child: Text('功能列表', style: new TextStyle(fontSize: 15.sp)),
    ));
    for (FunctionItem item in _fuctionItems) {
      Container child = new Container(
        margin: EdgeInsets.symmetric(vertical: 13.w),
//        padding: EdgeInsets.symmetric(vertical: 12.w),
        child: new Row(
          children: <Widget>[
            Image.asset(
              Constant.ASSETS_IMG + item.icon,
              width: 37.5.w,
              height: 37.5.h,
            ),
//            CircleAvatar(
//              radius: 16.5.w,
//              backgroundImage: AssetImage(Constant.ASSETS_IMG + item.icon),
//            ),
            new Expanded(
                child: new Padding(
              padding: EdgeInsets.symmetric(horizontal: 11.5.w),
              child: new Column(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  new Text(
                    item.title,
                    style: new TextStyle(fontSize: 14.sp),
                  ),
                  new Text(
                    item.subTitle,
                    style: new TextStyle(
                        fontSize: 12.sp, color: ColorConstant.gray_cc),
                  )
                ],
              ),
            )),
            Image.asset(
              Constant.ASSETS_IMG + item.rightIcon,
              width: 37.5.w,
              height: 37.5.h,
            ),
          ],
        ),
      );
      children.add(child);
    }
    return children;
  }
}
